<template>
  <div class="spec-preview">
    <vue-photo-zoom-pro
      :high-url="newimg || img"
      :out-zoomer="true"
      :width="200"
      :height="200"
      :selector="true"
    >
      <img :src="newimg || img" style="height: 200px" />
    </vue-photo-zoom-pro>
  </div>
</template>

<script>
import vuePhotoZoomPro from "vue-photo-zoom-pro";
import "vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css";
export default {
  name: "Zoom",
  data() {
    return {
      newimg: "",
    };
  },
  props: ["img"],
  components: {
    vuePhotoZoomPro,
  },
  mounted() {
    // 创建自定义事件接受图片
    this.$bus.$on("getimgurl", (value) => {
      this.newimg = value;
    });
  },
};
</script>

<style lang="less">
.spec-preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;

  img {
    width: 100% !important;
    height: 100% !important;
  }

  .zoomer {
    z-index: 1;
    top: 0 !important;
    left: 10px !important ;
  }
  .selector {
    background: rgba(230, 50, 5, 0.3);
  }
}
</style>